<template>
	<view class="broad">
		<scroll-view scrollY class="broad-scroll">
			<view class="broad-nav">
				<view class="broad-nav-title">
					播客
				</view>
				<view class="broad-nav-main" v-for="(item, index) in radio" :key="index" @click="send(item.id)">
					<image :src="item.picUrl" mode=""></image>
					<view class="broad-nav-main-msg">
						<text>{{item.name}}</text>
						<view class="broad-nav-main-msg-text">
							<text>{{item.programCount}}个声音,</text>
							<text style="margin-left: 5px;">by {{item.dj.nickname}},</text>
							<text style="margin-left: 5rpx;">播放{{item.playCount | count}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: ['radio'],
		methods:{
			send(id){
				uni.navigateTo({
					url:'/view/RadioList/RadioList?id=' + id,
					
				})
			}
		},
		filters: {
			count(v) {
				return v > 10000 ? (v / 10000).toFixed(1) + '万次' : v + '次'
			},
		}
	}
</script>

<style lang="scss">
	.broad {
		padding: 0 15px;
		&-scroll{
			height: calc(100vh - 84px);
		}
		&-nav {
			display: flex;
			flex-direction: column;
			padding: 30rpx 0 0 0;
			box-sizing: border-box;
			border-bottom: 1px solid #E5E5E5;

			&-title {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background-color: #fff;
				padding: 30rpx;
				font-weight: 600;
				font-size: 17px;
			}

			&-main {
				padding: 10rpx 30rpx;
				background-color: #fff;
				display: flex;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10px;
				}

				&-msg {
					// display: flex;
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					justify-content: center;

					&-text {
						display: flex;
						align-items: center;
						color: #8F8F8F;
						font-size: 20rpx;
					}
				}
			}
		}

	}
</style>
